<template>
  <van-tabbar :border="false" route>
    <van-tabbar-item to="/">
      <span>首页</span>
      <template #icon="props">
        <geek-icon :name="props.active ? 'sy' : 'sy'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/list">
      <span>账单</span>
      <template #icon="props">
        <geek-icon :name="props.active ? 'a-01pinglun1' : 'a-01pinglun1'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/add">
      <span>新增</span>
      <template #icon="props">
        <geek-icon :name="props.active ? 'zj' : 'zj'" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/user">
      <span>我的</span>
      <template #icon="props">
        <geek-icon :name="props.active ? 'me' : 'me'" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: 'GeekTabbar'
}
</script>
<style scoped lang="less">
.van-tabbar {
  // background: #f7f8fa;
  position: static;
  background: #ffffff;
}
/deep/ .van-tabbar-item--active {
  // color: #fc6627;
  color: #0eb659;
  // background-color: #f7f8fa;
  background: #ffffff;
}
/deep/ .van-tabbar-item__icon {
  font-size: 20px;
}
/deep/ .van-tabbar-item__text {
  font-size: 10px;
}
</style>
